<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  
  <title>023gitee+hexo搭建个人博客 | Hexo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="系统学习uniapp第二天，搭建个人博客">
<meta property="og:type" content="article">
<meta property="og:title" content="023gitee+hexo搭建个人博客">
<meta property="og:url" content="http://example.com/2023/03/22/023gitee-hexo%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:description" content="系统学习uniapp第二天，搭建个人博客">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="http://example.com/023gitee-hexo%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/%E9%85%8D%E7%BD%AE%E6%A0%B7%E5%BC%8F.png">
<meta property="og:image" content="http://example.com/023gitee-hexo%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/%E4%B8%B4%E6%97%B6%E6%96%87%E4%BB%B6.png">
<meta property="og:image" content="http://example.com/023gitee-hexo%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/%E7%88%B6%E5%AD%90%E6%A0%8F%E7%9B%AE.png">
<meta property="article:published_time" content="2023-03-22T15:53:14.000Z">
<meta property="article:modified_time" content="2023-03-22T16:55:38.067Z">
<meta property="article:author" content="John Doe">
<meta property="article:tag" content="uniapp">
<meta property="article:tag" content="hexo">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://example.com/023gitee-hexo%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/%E9%85%8D%E7%BD%AE%E6%A0%B7%E5%BC%8F.png">
  
    <link rel="alternate" href="/atom.xml" title="Hexo" type="application/atom+xml">
  
  
    <link rel="shortcut icon" href="/favicon.png">
  
  
    
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/typeface-source-code-pro@0.0.71/index.min.css">

  
  
<link rel="stylesheet" href="/css/style.css">

  
    
<link rel="stylesheet" href="/fancybox/jquery.fancybox.min.css">

  
<meta name="generator" content="Hexo 6.3.0"></head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">Hexo</a>
      </h1>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/">Home</a>
        
          <a class="main-nav-link" href="/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://example.com"></form>
      </div>
    </div>
  </div>
</header>

      <div class="outer">
        <section id="main"><article id="post-023gitee-hexo搭建个人博客" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  <div class="article-meta">
    <a href="/2023/03/22/023gitee-hexo%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/" class="article-date">
  <time class="dt-published" datetime="2023-03-22T15:53:14.000Z" itemprop="datePublished">2023-03-22</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/%E7%99%BE%E6%97%A5%E5%8D%9A%E5%AE%A2%E8%AE%A1%E5%88%92/">百日博客计划</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 class="p-name article-title" itemprop="headline name">
      023gitee+hexo搭建个人博客
    </h1>
  

      </header>
    
    <div class="e-content article-entry" itemprop="articleBody">
      
        <h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>日志，各位看官就当乐子看吧。</p>
<p><strong>正经人谁写日记啊？！！</strong>    ——鹅城县长</p>
<p>今天uniapp的学习进度到了<code>showModal</code>，其次是在码云上重新搭了博客。介绍工具、记录一下过程。改用个人博客，也是因为这几天写的只能算日志，不算技术博客，还是放在个人网站上比较好。</p>
<h2 id="技术选型"><a href="#技术选型" class="headerlink" title="技术选型"></a>技术选型</h2><h3 id="静态网站工具"><a href="#静态网站工具" class="headerlink" title="静态网站工具"></a>静态网站工具</h3><p>gitee上的Page服务中提到了<code>Jekyll</code>、<code>Hugo</code>、<code>Hexo</code>三种。虽然<code>Hexo</code>的部署过程最慢（<a target="_blank" rel="noopener" href="https://gitee.com/help/articles/4136#article-header0">官方说的</a>），但是个人只用过<code>Hexo</code>，所以选择了Hexo。</p>
<h3 id="服务提供商"><a href="#服务提供商" class="headerlink" title="服务提供商"></a>服务提供商</h3><p><code>gitee</code>和<code>github</code>两个。gitee码云，国内的服务商，访问会更稳定。但是使用gitee有个缺点，<code>hexo g -d</code>没法自动部署，每次都需要上网站更新部署，下面会提到（不知道github会不会有这种情况）。</p>
<h1 id="gitee-hexo搭建"><a href="#gitee-hexo搭建" class="headerlink" title="gitee+hexo搭建"></a>gitee+hexo搭建</h1><p>参考：<a target="_blank" rel="noopener" href="https://www.zhihu.com/question/21193762/answer/79109280">使用hexo，如果换了电脑怎么更新博客？ - CrazyMilk的回答 - 知乎</a>，以前在github上用过Hexo搭建过博客，换设备后，想用这个网站接着写，发现github的仓库中只保留了生成的静态网页，也就是说<code>hexo</code>配置过程要重新弄，连接远程仓库，没有原文档，重新部署的话，旧的博客不就没了吗？所以这次重新使用<code>hexo</code>格外关注这个的解决方案。不想上传配置文件的，看这篇文章：<a target="_blank" rel="noopener" href="https://blog.csdn.net/weixin_45631738/article/details/104716374">使用hexo+gitee搭建博客</a><br>回到文章内容，参考文章是用github的，那我就把gitee的过程写一下。</p>
<h2 id="1-准备好远程仓库"><a href="#1-准备好远程仓库" class="headerlink" title="1.准备好远程仓库"></a>1.准备好远程仓库</h2><p>创建步骤就不细聊了，跟着页面提示走。注意两个点：</p>
<ol>
<li>仓库名最好是账号的初始名称（如果改过名，可打开个人主页，头像下方‘@’的一串字符就是名称），如果仍想用别的名字，就需要配置一下样式的路径，否则网页没有样式，显示效果很丑。</li>
</ol>
<p><img src="/023gitee-hexo%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/%E9%85%8D%E7%BD%AE%E6%A0%B7%E5%BC%8F.png" alt="配置样式"></p>
<ol start="2">
<li>设置两个分支<code>master</code>和<code>hexo</code>，hexo存放网站的原始文件，包括配置等；master存放生成的静态网页。最后将<code>hexo</code>设置成默认分支。</li>
</ol>
<h2 id="2-准备本地仓库"><a href="#2-准备本地仓库" class="headerlink" title="2.准备本地仓库"></a>2.准备本地仓库</h2><p>克隆远程仓库</p>
<h2 id="3-准备hexo"><a href="#3-准备hexo" class="headerlink" title="3.准备hexo"></a>3.准备hexo</h2><ol>
<li>安装，打开<code>git bash</code>全局安装hexo：<code>npm i hexo-cli -g</code></li>
<li>初始化，在<code>项目文件名a</code>的<strong>外一层</strong>用<code>hexo init 临时文件名b</code>初始化一个<code>hexo</code>项目。hexo init使用的文件夹<strong>必须是空</strong>，所以先在其它地方初始化，然后复制到本地仓库中。</li>
<li>复制，把<code>临时文件名a</code>文件夹中自动生成的所有文件复制到<code>项目文件名a</code>文件夹中。生成的文件大致有以下这些。</li>
</ol>
<p><img src="/023gitee-hexo%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/%E4%B8%B4%E6%97%B6%E6%96%87%E4%BB%B6.png" alt="临时文件"></p>
<ol start="4">
<li>下载hexo的依赖包，回到本地仓库的目录下，执行<code>npm i</code><blockquote>
<p>注意：之后所有操作都在<code>hexo</code>分支下。</p>
</blockquote>
</li>
<li>下载<code>hexo-deployer-git</code>，hexo部署到git上的工具包，执行<code>npm i hexo-deployer-git</code>。</li>
<li>修改分支为master，<code>repo</code>改为自己的远程仓库，<code>branch</code>等于<code>master</code>。</li>
</ol>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Deployment</span></span><br><span class="line"><span class="comment">## Docs: https://hexo.io/docs/one-command-deployment</span></span><br><span class="line">deploy:</span><br><span class="line">  <span class="built_in">type</span>: git</span><br><span class="line">  repo: git@gitee.com:t0o-yang/t0o-yang.git</span><br><span class="line">  branch: master</span><br></pre></td></tr></table></figure>

<h2 id="4-部署上线"><a href="#4-部署上线" class="headerlink" title="4.部署上线"></a>4.部署上线</h2><ol>
<li>依次执行<code>git add .</code>、<code>git commit -m &quot;...&quot;</code>、<code>git push origin hexo</code>提交网站相关的文件；</li>
<li>执行<code>hexo g -d</code>生成网站并部署<blockquote>
<p>访问gitee上的博客，发现并没有自动更新，只能到gitee上手动操作。不知道github有没有这种问题</p>
</blockquote>
</li>
</ol>
<h1 id="如何使用"><a href="#如何使用" class="headerlink" title="如何使用"></a>如何使用</h1><p>使用<code>hexo new 文章名</code>新建文章，会自动生成md文件。或者，在本地仓库的 <code>/source/_posts</code> 目录下直接新建md文件。建议用命令生成。命令生成会根据设定的模板生成内容，如标题、时间等等，不需要自己写了。同时也能直接生成资源文件夹，存放图片等等内容。</p>
<h2 id="启用资源文件夹"><a href="#启用资源文件夹" class="headerlink" title="启用资源文件夹"></a>启用资源文件夹</h2><p>在<code>_config.yml</code>中修改<code>post_asset_folder</code>，并添加一些配置。</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">post_asset_folder: true # 图像等资源访问</span><br><span class="line">marked: # 启用后，资源图片将会被自动解析为其对应文章的路径，直接用md语法</span><br><span class="line">  prependRoot: true</span><br><span class="line">  postAsset: true</span><br></pre></td></tr></table></figure>

<p>在文章中直接用<code>![](图片路径)</code>就可以放置图片了。更多内容，看<a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/docs/asset-folders">官方文档</a>.</p>
<h2 id="增加标签和分栏"><a href="#增加标签和分栏" class="headerlink" title="增加标签和分栏"></a>增加标签和分栏</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: 023gitee+hexo搭建个人博客</span><br><span class="line"><span class="built_in">date</span>: 2023-03-22 23:53:14</span><br><span class="line">tags: [uniapp,hexo]</span><br><span class="line">categories: 百日博客计划</span><br><span class="line">description: 系统学习uniapp第二天，搭建个人博客</span><br><span class="line">---</span><br></pre></td></tr></table></figure>

<p>文章开头增加这些代码，其中，<code>tags</code>是数组，表示有多个标签；只有一个标签，直接写标签名就行了；categories表示分栏（分类），只有一个值时，表示一个分栏；如果是数组，想<code>categories: [a, b]</code>，则表示文章在<code>a</code>栏目下的<code>b</code>子栏目下，如下。</p>
<p><img src="/023gitee-hexo%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/%E7%88%B6%E5%AD%90%E6%A0%8F%E7%9B%AE.png" alt="父子栏目"></p>
<p>同属多个栏目的语法，还没找到…</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://example.com/2023/03/22/023gitee-hexo%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/" data-id="clfjxfiot00008oaa0d25f1z5" data-title="023gitee+hexo搭建个人博客" class="article-share-link">Share</a>
      
      
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/hexo/" rel="tag">hexo</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/uniapp/" rel="tag">uniapp</a></li></ul>

    </footer>
  </div>
  
    
<nav id="article-nav">
  
    <a href="/2023/03/23/024uniapp%E7%AC%AC%E4%B8%89%E5%A4%A9/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          024uniapp第三天
        
      </div>
    </a>
  
  
    <a href="/2023/03/22/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8MDN%E6%96%87%E6%A1%A3/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title"></div>
    </a>
  
</nav>

  
</article>


</section>
        
          <aside id="sidebar">
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Categories</h3>
    <div class="widget">
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/%E7%99%BE%E6%97%A5%E5%8D%9A%E5%AE%A2%E8%AE%A1%E5%88%92/">百日博客计划</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Tags</h3>
    <div class="widget">
      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/tags/ES6/" rel="tag">ES6</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/hexo/" rel="tag">hexo</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/uniapp/" rel="tag">uniapp</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/%E5%89%8D%E7%AB%AF/" rel="tag">前端</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Tag Cloud</h3>
    <div class="widget tagcloud">
      <a href="/tags/ES6/" style="font-size: 10px;">ES6</a> <a href="/tags/hexo/" style="font-size: 10px;">hexo</a> <a href="/tags/uniapp/" style="font-size: 10px;">uniapp</a> <a href="/tags/%E5%89%8D%E7%AB%AF/" style="font-size: 10px;">前端</a>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2023/03/">March 2023</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2023/03/24/025uniapp-done/">025uniapp-done</a>
          </li>
        
          <li>
            <a href="/2023/03/23/024uniapp%E7%AC%AC%E4%B8%89%E5%A4%A9/">024uniapp第三天</a>
          </li>
        
          <li>
            <a href="/2023/03/22/023gitee-hexo%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/">023gitee+hexo搭建个人博客</a>
          </li>
        
          <li>
            <a href="/2023/03/22/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8MDN%E6%96%87%E6%A1%A3/">(no title)</a>
          </li>
        
          <li>
            <a href="/2023/03/22/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/">(no title)</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      
      &copy; 2023 John Doe<br>
      Powered by <a href="https://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>

    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">Home</a>
  
    <a href="/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    


<script src="/js/jquery-3.4.1.min.js"></script>



  
<script src="/fancybox/jquery.fancybox.min.js"></script>




<script src="/js/script.js"></script>





  </div>
</body>
</html>